<template>
  <div>
    <div class="main">
      <!-- 导航按钮 -->
      <navber-btn v-show="navsBtn"></navber-btn>

      <!-- 路由视图 -->
      <router-view
        @getnavs-btn="getnavsBtn"
        @get-player-id="getPlayerId"
        @get-play-all-id="getPlayAllId"
        @get-disc-all-id="getdiscAllId"
        @get-artists-all-id="getArtistsAllId"
        @get-search-all-id="getSearchAllId"
        @get-uid="getUid"
        :uid="uid"
        @set-btn="setBtn"
        :btn="btn"
        @get-style="getStyle"
        @get-hide-play="getHidePlay"
        @get-rec-id="getRecId"
      ></router-view>

      <!-- 播放器组件 -->
      <player
        v-show="playerId"
        :player-id="playerId"
        :list-id="listId"
        :disc-id="discId"
        :artists="artists"
        @set-player-id="setPlayerId"
        :searchId="searchId"
        :re-style="reStyle"
        :mvmu="mvmu"
        :rec-id="recId"
      ></player>
    </div>
  </div>
</template>

<script>
import navberBtn from "./components/base/navberBtn.vue";
import player from "./components/base/player.vue";
export default {
  data() {
    return {
      // 导航按钮
      navsBtn: true,
      // 播放歌曲id
      playerId: null,
      // 侦听播放列表id
      listId: null,
      // 新碟id
      discId: null,
      // 歌手id
      artists: null,
      // 搜索
      searchId: null,
      //用户
      uid: null,
      //索引
      btn: null,
      //音乐显示
      reStyle: true,
      // 视频-音乐
      mvmu: true,
      //最近播放
      recId:null,
    };
  },
  methods: {
    getPlayerId(id) {
      // 获取子组件播放歌曲id
      console.log("歌曲id", id);
      this.playerId = id;
    },
    getnavsBtn(obj) {
      this.navsBtn = obj;
    },
    getPlayAllId(id) {
      this.listId = id;
    },
    getdiscAllId(id) {
      this.discId = id;
    },
    getArtistsAllId(id) {
      this.artists = id;
    },
    setPlayerId(id) {
      this.playerId = id;
    },
    getSearchAllId(id) {
      this.searchId = id;
    },
    getUid(id) {
      this.uid = id;
    },
    setBtn(obj) {
      this.btn = obj;
    },
    getStyle(obj) {
      console.log(obj);
      this.reStyle = obj;
    },
    getHidePlay(obj) {
      this.mvmu = obj;
    },
    getRecId(obj) {
      this.recId = obj;
    },
  },
  components: { navberBtn, player },
};
</script>

<style  lang= "less">
@import "./assets/css/base.css";
</style>